<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统平台首页</title>
    <link rel="stylesheet" href="./css/homepage.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<script  src="js/commanIp.js"></script>
	<script src="js/echarts.min.js"></script>
	<script src="js/dataanalysis.js"></script>
    <script src="js/homepage.js"></script>
	<script  src="js/menulist.js"></script>
	<script src="js/click.js"></script>
	<script src="js/courseSearch.js"></script>
	<!-- 处理用户管理页面的逻辑 -->
	<script src="js/userManagement.js"></script>
	<script src="js/personalcenter.js"></script>
	<script src="js/courseaudit.js"></script>
	<!-- 处理教师审核查看详情页面的js -->
	<script src="js/teacheraudit.js"></script>
</head>
<body> 
    <header>
        <!-- 导航栏 -->
        <nav>
            <div class="zuoshang">
                <img src="./img/tubiao.png" alt="卓越在线" />
                <p>卓越在线管理系统</p>
            </div>
            <div class="profile">
                <img src="./img/Touxiang.png" alt="User Avatar" class="avatar">
            	<!-- 显示头像右边的倒三角 -->
                <span class="caret"></span> 
               <div class="dropdown">
                   <a href="#" onclick="showPersonalCenter()">个人中心</a>
                   <a href="#" onclick="tuichu()">退出登录</a>
               </div>
            </div>
        </nav>
    </header>
    <main>
         <div class="sidebar">
                <ul class="accordion" id="menu-container">
                    <!-- 菜单将在这里动态生成 -->
                </ul>
        </div>
        <div class="content" id="content">
            <div id="001" class="content-section" style="display: none;">
                <div class="youxiashang">
                    <div>
                        <p>今日访问量</p>
						<p>2834</p>
                    </div>
                    <div>
						<p>在线用户数</p>
						<p>2563</p>
					</div>
                    <div>
						<p>课程总数</p>
						<p>2563</p>
					</div>
                    <div>
						<p>今日营收</p>
						<p>1256</p>
					</div>
                </div>
                <ul class="youxia zhong">
                   <div class="trend-container">
                       <div class="trend-header">
                           <h3>销售趋势</h3>
                           <select name="" id="trendSelect">
                               <option value="ss">近1周</option>
                               <option value="ss">上一周</option>
                               <option value="ss">近1月</option>
                           </select>
                       </div>
					   <!-- 显示折线图图表的容器 -->
                       <div id="salesTrendChart" style="width: 100%; height: calc(100% - 60px);"></div>
                   </div>
                    <div class="trend-container">
						<div class="trend-header">
							<h3>课程分类占比</h3>
							<select name="" id="">
							    <option value="ss">全部</option>
							    <option value="ss">前端开发</option>
							    <option value="ss">后端开发</option>
							    <option value="ss">移动开发</option>
							    <option value="ss">数据库</option>
							    <option value="ss">运维/测试</option>
							</select>
						</div>
						<!-- 添加饼图容器 -->
						    <div id="courseCategoryChart" style="width: 100%; height: calc(100% - 60px);"></div>
                    </div>
                </ul>
                <div class="youxiaxia">
                    <div class="title-container">
                        <h3>待办事项</h3>
                        <h4>查看全部</h4>
                    </div>
                    <ul>
                        <li>
                            <div class="item-content">
                                <img src="img/kcsh.png" alt="" />
                                <div class="text-content">
                                    <p>课程审核待处理</p>
                                    <span>3个课程等待审核</span>
                                </div>
                            </div>
                            <button>去处理</button>
                        </li>
                        <li>
                            <div class="item-content">
                                <img src="img/kcsh.png" alt="" />
                                <div class="text-content">
                                    <p>课程审核待处理</p>
                                    <span>3个课程等待审核</span>
                                </div>
                            </div>
                            <button>去处理</button>
                        </li>
                        <li>
                            <div class="item-content">
                                <img src="img/kcsh.png" alt="" />
                                <div class="text-content">
                                    <p>课程审核待处理</p>
                                    <span>3个课程等待审核</span>
                                </div>
                            </div>
                            <button>去处理</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="002" class="content-section" style="display: none;">
                <form id="searchForm">
                    <label for="course-name">课程名称:</label>
                    <input type="text" id="course-name" placeholder="请输入课程名称">
                    
                    <label for="status">课程状态:</label>
                    <select id="status">
                        <option value="">全部</option>
                        <option value="已发布">已发布</option>
                        <option value="未发布">未发布</option>
                    </select>
                
                    <label for="release-date">发布时间:</label>
                    <input type="date" id="release-date">
                
                    <button type="submit">搜索</button>
                    <button type="reset">重置</button>
                </form>
                
                <br>
                
                <a href="#" style="background-color: black; color: white; padding: 5px 10px;">新增课程</a>
                <a href="#" style="float: right; background-color: #f2f2f2; padding: 5px 10px;">导出数据</a>
                
               <table>
                   <thead>
                       <tr>
                           <!-- <th><input type="checkbox" id="selectAllCourses"></th> -->
                           <th>序号</th>
                           <th>课程信息</th>
                           <th>价格</th>
                           <th>状态</th>
                           <th>发布时间</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   <tbody>
                      <!-- 这里的内容是根据从后台获取的数据动态生成的 -->
                   </tbody>
               </table>
			   <!-- 在表格后面添加分页容器 -->
			   <div class="pagination-container">
			       <div class="page-size-selector">
			           <select>
			               <option value="10">10条/页</option>
			               <option value="20">20条/页</option>
			               <option value="50">50条/页</option>
			           </select>
			       </div>
			       <div class="pagination">
			           <a href="#" class="prev">上一页</a>
			           <a href="#" class="page active">1</a>
			           <a href="#" class="page">2</a>
			           <a href="#" class="page">3</a>
			           <a href="#" class="next">下一页</a>
			       </div>
			       <div class="total-count">
			           共 <span>2</span> 条
			       </div>
			       <div class="page-jump">
			           前往 <input type="number" min="1" value="1"> 页
			       </div>
			   </div>
                
             <!--   <nav>
                    <ul>
                        <li><a href="#">上一页</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">下一页</a></li>
                    </ul>
                </nav> -->
            </div>
            <div id="003" class="content-section" style="display: none;">
                <div class="ddheader">
                	   <div class="header">
                	       <button id="addUser">新增用户</button>
                	       <button id="importUsers">批量导入</button>
                	       <button id="exportUsers">批量导出</button>
                	   </div>
                	   <div class="dbheader">
                	   	<input type="text" placeholder="搜索用户" id="searchInput">
                	   </div>
                </div>
                
                 <div class="filters">
                     <label for="statusFilter">用户状态:</label>
                     <select id="statusFilter">
                         <option value="">全部</option>
                         <option value="">启用</option>
                			<option value="">禁言</option>
                     </select>
                
                     <label for="roleFilter">用户角色:</label>
                     <select id="roleFilter">
                         <option value="">全部角色</option>
                         <option value="">管理员</option>
                			<option value="">普通用户</option>
                			<option value="">教师</option>
                     </select>
                 </div>
                
                 <table class="users-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAllUsers"></th>
                            <th>序号</th>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>联系方式</th>
                            <th>角色</th>
                            <th>注册时间</th>
                            <th>最后登录时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                     <tbody>
                         <tr>
                				<td><input type="checkbox"></td>
                				<td>10001</td>
                				<td>张三</td>
                				<td>13012181256 <br />zhangsan@example.com</td>
                				<td>管理员</td>
                				<td>2024-01-15  10:30</td>
                				<td>2024-02-30  5:30</td>
                				<td>启用</td>
                				<td>禁言</td>
                			</tr>
                			<tr>
                				<td><input type="checkbox"></td>
                				<td>10002</td>
                				<td>张三</td>
                				<td>13012181256 <br />zhangsan@example.com</td>
                				<td>管理员</td>
                				<td>2024-01-15  10:30</td>
                				<td>2024-02-30  5:30</td>
                				<td>启用</td>
                				<td>禁言</td>
                			</tr>
                     </tbody>
                 </table>
				  <!-- 添加分页容器 -->
				  <div class="pagination-container">
				          <div class="page-size-selector">
				              <select id="userPageSize">
				                  <option value="10">10条/页</option>
				                  <option value="20">20条/页</option>
				                  <option value="50">50条/页</option>
				              </select>
				          </div>
				          <div class="pagination">
				              <!-- 分页按钮将由 JavaScript 动态生成 -->
				          </div>
				          <div class="total-count">
				              共 <span>0</span> 条
				          </div>
				          <div class="page-jump">
				              前往 <input type="number" min="1" value="1"> 页
				          </div>
				      </div>
            </div>

			<div id="004" class="content-section" style="display: none;">
				<!-- 搜索框 --> 
				<div class="search-bar">
				    <input type="text" placeholder="搜索订单号/课程名称">
				    <div class="status-select">
						<select id="orderStatus">
							<option value="all">全部状态</option>
							<option value="paid">已付款</option>
							<option value="unpaid">未付款</option>
						</select>
					</div>
				</div>
				
				<!-- 订单状态统计 -->
				<div class="order-status">
				    <div class="status-card">
				        <span>待付款订单</span>
				        <p>128</p>
				    </div>
				    <div class="status-card">
				        <span>已付款订单</span>
				        <p>356</p>
				    </div>
				    <div class="status-card">
				        <span>已完成订单</span>
				        <p>892</p>
				    </div>
				    <div class="status-card">
				        <span>已取消订单</span>
				        <p>64</p>
				    </div>
				</div>
				
				<!-- 订单列表 -->
				<table class="order-list">
				    <thead>
				        <tr>
				            <th><input type="checkbox"></th>
				            <th>订单号</th>
				            <th>课程信息</th>
				            <th>下单时间</th>
				            <th>支付金额</th>
				            <th>订单状态</th>
				            <th>操作</th>
				        </tr>
				    </thead>
				    <tbody id="orderTableBody">
				        <!-- 表格内容将由JavaScript动态生成 -->
				    </tbody>
				</table>
				
				<!-- 分页 -->
				<nav aria-label="Page navigation example">
				    <ul class="pagination" id="pagination">
				        <!-- 分页链接将由JavaScript动态生成 -->
				    </ul>
				</nav>
			</div>
            <div id="add-user" class="content-section" style="display: none;">
                <h2>新增用户</h2>
                <p>这里是新增用户的内容。</p>
            </div>
            <div id="pending-orders" class="content-section" style="display: none;">
                <h2>待付款订单</h2>
                <p>这里是待付款订单的内容。</p>
            </div>
            <div id="paid-orders" class="content-section" style="display: none;">
                <h2>已付款订单</h2>
                <p>这里是已付款订单的内容。</p>
            </div>
			<div id="personal-center" class="content-section" style="display: none;">
				<!-- 个人中心内容将通过JS动态加载 -->
			</div>
			<!-- 添加课程审核部分 -->
			<div id="s008" class="content-section" style="display: none;">
			    <div class="container">
			        <div class="filter-bar">
			            <div class="status-filters">
			                <span>状态：</span>
			                <button class="filter-btn">全部</button>
			                <button class="filter-btn active">待审核</button>
			                <button class="filter-btn">已通过</button>
			                <button class="filter-btn">已驳回</button>
			            </div>
			            <div class="time-filter">
			                <span>提交时间：</span>
			                <select>
			                    <option>最近一周</option>
			                    <option>最近一月</option>
			                    <option>最近三月</option>
			                </select>
			            </div>
			        </div>
			
			        <table>
			            <thead>
			                <tr>
								<th><input type="checkbox" id="selectAllAudit"/></th>
								<th>序号</th>
			                    <th>课程ID</th>
			                    <th>课程信息</th>
			                    <th>讲师</th>
			                    <th>提交时间</th>
			                    <th>状态</th>
			                    <th>操作</th>
			                </tr>
			            </thead>
			            <tbody id="audit-course-list">
			            </tbody>
			        </table>
			
			        <div class="pagination-container">
			            <div class="pagination">
			                <a href="#" class="prev">上一页</a>
			                <a href="#" class="page active">1</a>
			                <a href="#" class="page">2</a>
			                <a href="#" class="page">3</a>
			                <a href="#" class="next">下一页</a>
			            </div>
			            <div class="total-count">
			                共 <span>0</span> 条
			            </div>
			        </div>
			    </div>
			</div>
			<!-- 教师审核的内容 -->
			<div id="s009" class="content-section" style="display: none;">
			    <div class="container">
			        <h1>教师入驻审核</h1>
			        <div class="status-cards">
			            <div class="status-card pending">
			                <span>待审核</span>
			                <strong>25</strong>
			            </div>
			            <div class="status-card approved">
			                <span>已通过</span>
			                <strong>158</strong>
			            </div>
			            <div class="status-card rejected">
			                <span>已拒绝</span>
			                <strong>12</strong>
			            </div>
			        </div>
			        <div class="filter-bar">
			            <!-- <select>
			                <option>审核状态</option>
			                <option>待审核</option>
			                <option>已通过</option>
			                <option>已拒绝</option>
			            </select> -->
			            <div class="teacher-search">
			                <input type="text" id="teacher-search-input" placeholder="输入关键词搜索教师...">
			            </div>
			        </div>
					<table>
					    <thead>
					        <tr>
					            <th>序号</th>
					            <th>教师信息</th>
					            <th>专业领域</th>
					            <th>工作年限</th>
					            <th>提交时间</th>
					            <th>审核状态</th>
					            <th>操作</th>
					        </tr>
					    </thead>
					    <tbody>
					        <!-- 这里应该是动态渲染的内容 -->
					    </tbody>
					</table>
			        <div class="pagination">
			            <button class="page-btn">上一页</button>
			            <button class="page-btn active">1</button>
			            <button class="page-btn">2</button>
			            <button class="page-btn">3</button>
			            <button class="page-btn">下一页</button>
			        </div>
			    </div>
			</div>
        </div>
    </main>
	<!-- 添加用户的页面 -->
	<div id="userModal" class="modal-overlay" style="display: none;">
	    <div class="modal">
	        <h2>添加用户</h2>
	        <form id="addUserForm">
	            <label for="userName">* 用户名称</label>
	            <input type="text" id="userName" placeholder="请输入用户名称" required>
	
	            <label for="userPhone">* 用户手机号</label>
	            <input type="text" id="userPhone" placeholder="请输入用户手机号" required>
				
	            <label for="userEmail">* 用户邮箱</label>
	            <input type="text" id="userEmail" placeholder="请输入用户邮箱" required>
				
	            <label for="userPassword">* 用户密码</label>
	            <input type="password" id="userPassword" placeholder="请输入用户密码" required>
	
	            <label for="userRole">用户角色</label>
	            <div class="role-options">
	                <div class="role-item">
	                    <input type="radio" id="teacher" name="userRole" value="老师" >
	                    <label for="teacher" class="role-label">
	                        <i class="fas fa-chalkboard-teacher"></i>
	                        <span>老师</span>
	                    </label>
	                </div>
	                <div class="role-item">
	                    <input type="radio" id="student" name="userRole" value="学生" checked>
	                    <label for="student" class="role-label">
	                        <i class="fas fa-user-graduate"></i>
	                        <span>学生</span>
	                    </label>
	                </div>
	                <div class="role-item">
	                    <input type="radio" id="admin" name="userRole" value="管理员">
	                    <label for="admin" class="role-label">
	                        <i class="fas fa-user-cog"></i>
	                        <span>管理员</span>
	                    </label>
	                </div>
	            </div>
				<!-- 添加教师特有字段容器 -->
				<div id="teacherFields" style="display: none;">
				    <label for="direction">* 教学方向</label>
				    <input type="text" id="direction" placeholder="请输入教学方向">
				
				    <label for="workyears">* 工作年限</label>
				    <input type="number" id="workyears" placeholder="请输入工作年限">
				
				    <label for="introduce">* 个人介绍</label>
				    <textarea id="introduce" placeholder="请输入个人介绍"></textarea>
				</div>

	
	            <div class="form-buttons">
	                <button type="submit" class="btn-submit">确定</button>
	                <button type="button" class="btn-cancel" onclick="closeUserModal()">取消</button>
	            </div>
	        </form>
	    </div>
	</div>
	<!-- 用户点击详细信息之后出现的页面 -->
	<div id="courseDetailModal" class="modal-overlay" style="display: none;">
	    <div class="modal-content">
	        <div class="container">
	            <h1>课程审核详情</h1>
	            
	            <div class="section">
	                <h2>课程基本信息</h2>
	                <div class="basic-info">
	                    <div class="info-item">
	                        <span class="info-label">课程名称：</span>
	                        <span class="info-value" id="detail-course-name"></span>
	                    </div>
	                    <div class="info-item">
	                        <span class="info-label">课程ID：</span>
	                        <span class="info-value" id="detail-course-id"></span>
	                    </div>
	                    <div class="info-item">
	                        <span class="info-label">提交时间：</span>
	                        <span class="info-value" id="detail-submit-time"></span>
	                    </div>
	                    <div class="info-item">
	                        <span class="info-label">提交教师：</span>
	                        <span class="info-value" id="detail-teacher"></span>
	                    </div>
	                </div>
	            </div>
	
	            <div class="section content-preview">
					<h2>
						课程内容预览
						<span class="preview-link" onclick="switchToPreview()">
							<i class="fas fa-eye"></i> 点击预览
						</span>
					</h2>
	                <div class="course-intro">
	                    <p id="detail-course-intro"></p>
	                </div>
	                <h3>教学目标</h3>
	                <ul id="detail-course-goals"></ul>
	            </div>
	
	            <div class="stats">
	                <div class="stat-item">
	                    <div class="stat-value" id="detail-courseware-count">0</div>
	                    <div class="stat-label">课件数量</div>
	                </div>
	                <div class="stat-item">
	                    <div class="stat-value" id="detail-video-count">0</div>
	                    <div class="stat-label">视频数量</div>
	                </div>
	                <div class="stat-item">
	                    <div class="stat-value" id="detail-homework-count">0</div>
	                    <div class="stat-label">作业数量</div>
	                </div>
	                <div class="stat-item">
	                    <div class="stat-value" id="detail-resource-completion">0%</div>
	                    <div class="stat-label">资源完整度</div>
	                    <div class="progress-bar">
	                        <div class="progress" id="detail-resource-progress"></div>
	                    </div>
	                </div>
	            </div>
	
	            <div class="audit-status">
	                <div class="info-item">
	                    <span class="info-label">审核状态：</span>
	                    <span class="status-tag" id="detail-audit-status">审核中</span>
	                </div>
	                <div class="info-item">
	                    <span class="info-label">审核人：</span>
	                    <span class="info-value" id="detail-auditor"></span>
	                </div>
	                <div class="info-item">
	                    <span class="info-label">开始时间：</span>
	                    <span class="info-value" id="detail-audit-time"></span>
	                </div>
	            </div>
	
	            <div class="buttons">
	                <button class="btn btn-return" onclick="closeCourseDetail()">返回</button>
	                <button class="btn btn-reject" onclick="rejectCourseFromDetail()">驳回</button>
	                <button class="btn btn-approve" onclick="approveCourseFromDetail()">通过</button>
	            </div>
	        </div>
	    </div>
	</div>
	<!-- 添加课程预览弹出层 -->
	<div id="coursePreviewModal" class="modal-overlay" style="display: none;">
	    <div class="modal-content preview-content">
	        <!-- 左侧目录 -->
	        <div class="course-menu">
	            <div class="menu-title">课程目录</div>
	        </div>
	
	        <!-- 右侧内容区域 -->
	        <div class="content">
	            <div class="modal-header">
	                <h2 class="content-title">课程内容预览</h2>
	                <button class="close-btn" onclick="closeCoursePreview()">×</button>
	            </div>
	            <div class="video-container">
	                <!-- 视频将通过JavaScript动态加载 -->
	                <div class="loading">加载中...</div>
	            </div>
	            <div class="course-intro">
	                <!-- 课程介绍将通过JavaScript动态加载 -->
	                <div class="loading">加载中...</div>
	            </div>
	        </div>
	    </div>
	</div>
    <script src="./js/shuju.js"></script>
</body>
</html>